<template>
	<view class="body">
		<form @submit="loginOrRegHanlder">
			<view class="face-wapper"><image src="../../static/icos/default-face.png" class="face"></image></view>

			<view class="info-wapper">
				<label class="words-lbl">账号</label>
				<input name="username" type="text" value="" class="input" placeholder="请输入用户名" placeholder-class="graywords" />
			</view>

			<view class="info-wapper" style="margin-top: 40upx;">
				<label class="words-lbl">密码</label>
				<input name="password" type="text" value="" password="true" class="input" placeholder="请输入密码" placeholder-class="graywords" />
			</view>
			<!-- form-type="submit" 配合form @type -->
			<button type="primary" form-type="submit" style="margin-top: 60upx;width: 90%;">注册/登录</button>
		</form>
		
		<!-- 第三方登录H5不支持，所以隐藏掉 -->
		<!-- #ifndef H5 -->
			<view class="third-wapper">
				
				<view class="third-line">
					<view class="single-line">
						<view class="line"></view>
					</view>
					
					<view class="third-words">第三方账号登录</view>
					
					<view class="single-line">
						<view class="line"></view>
					</view>
				</view>
				
				<view class="third-icos-wapper">
					<!-- #ifdef APP-PLUS -->
					
					<!-- 5+app 用qq/微信/微博 登录 小程序用微信小程序登录 h5不支持 -->
					<image src="../../static/icos/weixin.png" data-logintype="weixin" @click="appOAuthLogin" class="third-ico"></image>
					<image src="../../static/icos/QQ.png" data-logintype="qq" @click="appOAuthLogin"  class="third-ico" style="margin-left: 80upx;"></image>
					<image src="../../static/icos/weibo.png" data-logintype="sinaweibo" @click="appOAuthLogin"  class="third-ico" style="margin-left: 80upx;"></image>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					 <!-- 微信公众号: 采用 微信小程序开放能力 -->
					<button open-type='getUserInfo' class="third-btn-ico"  @getuserinfo="wxLogin"> </button>
					 <!-- #endif -->
				</view>
			</view>
		<!-- #endif -->
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		// h5+登录
		appOAuthLogin(e){
			// h5+登录流程
			// 1、获取用户的登录类型
			// 2、授权登录
			// 3、授权登录成功以后，获取用户的信息
			// 4、调用开发者后台，执行一键注册或登录
			// 5、保存用户信息到全局的缓存中
			// 6、切换页面跳转，使用tab切换的api
			
			// 1、获取用户的登录类型
			let loginType = e.currentTarget.dataset.logintype;
			// 2、授权登录
			uni.login({
				provider: loginType,
				success: (loginRes) => {
					console.log("授权登录成功以后:",loginRes);
					uni.showLoading({
						title:"登录中...",
						mask: true
					})
					// 3、授权登录成功以后，获取用户的信息
					uni.getUserInfo({
						provider: loginType,
						success: (info) => {
							console.log("授权登录成功以后，获取用户的信息:",info.userInfo);
							var userInfo = info.userInfo;
							var face = "";
							var nickname = "";
							var openIdOrUid = "";
							if (loginType == "weixin") {
								face = userInfo.avatarUrl;
								nickname = userInfo.nickName;
								openIdOrUid = userInfo.openId;
							} else if (loginType == "qq") {
								openIdOrUid = userInfo.openId;
								nickname = userInfo.nickname;
								face = userInfo.figureurl_qq_2;
							} else if (loginType == "sinaweibo") {
								openIdOrUid = userInfo.id;
								nickname = userInfo.nickname;
								face = userInfo.avatar_large;
							}
							// 4、调用开发者后台，执行一键注册或登录
							uni.request({
								url: this.serverUrl + "/appUnionLogin/"+loginType+"?"+this.visitKey,
								method: "POST",
								data: {
									face,
									nickname,
									openIdOrUid
								},
								success: (res) => {
									console.log('调用开发者后台，执行一键注册或登录',res);
									if(res.data.status === 200){
										let userInfo = res.data.data;
										// 5、保存用户信息到全局的缓存中
										uni.setStorageSync("globalUser",userInfo);
										// 6、切换页面跳转，使用tab切换的api
										// 登录成功提示
										uni.showToast({
											title: "登录成功",
											duration: 1500,
											mask: true
										})
										uni.switchTab({
											url:"../me/me"
										})
									}
									
									
								},
								complete:()=>{
									uni.hideLoading();
								}
							})
							
						}
					})
					
					
				}
			})
			
			
			
		},
		// 微信登录
		wxLogin(e){
			var me = this;
			// 获取微信基本信息
			var userInfo = e.detail.userInfo;
			
			// 实现微信登录
			uni.login({
				provider: "weixin",
				success: (loginResult) => {
					// console.log(loginResult);
					// 获得微信登录的code：授权码
					var code = loginResult.code;
					// 设置登录到哪个对于的微信小程序，大家可以根据自己的后端去实现业务参数
					// [0:NEXT超英预告][1:超英预告][2:NEXT学院电影预告]
					
					// 微信小程序已经登录成功，只有入数据库这部分接口不可用，所以不能查询所有用户信息而已，模拟成功接口吧
					var loginToWhichMP = 1;
					// 停止实验
					
					// uni.request({
					// 	url: me.serverUrl + "/stu/mpWXLogin/" + code + "?qq=lee73585659",
					// 	data: {
					// 		"avatarUrl": userInfo.avatarUrl,
					// 		"nickName": userInfo.nickName,
					// 		"whichMP": loginToWhichMP
					// 	},
					// 	method: "POST",
					// 	success(userResult) {
					// 		console.log(userResult);
					// 		var userInfo = userResult.data.data;
					// 		// 保存用户信息到全局的缓存中
					// 		uni.setStorageSync("globalUser", userInfo);
					// 		// 切换页面跳转，使用tab切换的api
					// 		uni.switchTab({
					// 			url: "../me/me"
					// 		});
					// 	}
					// });
				}
			});
		},
		loginOrRegHanlder(e){ //登录或注册
			// let username = e.detail.value.username;
			// let password = e.detail.value.password;
			let {username, password} = e.detail.value;
			// console.log(username);
			// console.log(password);
			
			uni.request({
				url: this.serverUrl+"/user/registOrLogin?"+this.visitKey,
				data:{
					username,
					password
				},
				method: "POST",
				success: (res) => {
					if(res.data.status === 200){
						let userInfo = res.data.data;
						uni.setStorageSync("globalUser", userInfo);
						uni.switchTab({
							url:"../me/me"
						})
					}else{
						uni.showModal({
							title: "提示",
							content:res.data.msg,
							showCancel: false
						})
					}
				}
			})
		}
	}
};
</script>

<style>
@import url('registLogin.css');
</style>
